<template>
	<view class="big-box flex-col align-center"
	 :style="{background: 'url('+mineBg+') #fff no-repeat top center / 100% 544rpx',}"
	>
		<top-navigation :isBack="false">
			
		</top-navigation>
		<view class="top-bg">
			<view class="justify-between align-center">
				<view class="avatar justify-start align-center">
					<view class="ava-box">
						<x-img width="114rpx" height="114rpx" radius="50%" :src="defaultAva"></x-img>
						<view class="ava-tag center">
							企业用户
						</view>
					</view>
					<view class="name-box">
						<view class="name">
							请先登录企业账号
						</view>
						<view class="name-id">
							ID：26
						</view>
					</view>
				
				</view>
				<view class="update center">
					修改信息
				</view>
			</view>
			
		
			<view class="vip-info justify-between align-center" >
				<view class="before">
					
				</view>
				<view class="after">
					
				</view>
				<view class="vip-info-box justify-between align-center">
					<view class="">
						<view class="score">
							暂无
						</view>
						<view class="score-title">
							我的积分
						</view>
					</view>
					<u-line direction="col" length='69rpx'></u-line>
					<view class="">
						<view class="score">
							暂无
						</view>
						<view class="score-title">
							我的会员卡
						</view>
					</view>
					<u-line direction="col" length='69rpx'></u-line>
					<view class="">
						<view class="score">
							暂无
							<view class="score-tips center">
								去查看
							</view>
						</view>
						<view class="score-title">
							预约订单
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="cell-box flex-col align-center">
			<view class="ad  justify-between align-center"
			 :style="{background: 'url('+vipBg+') #fff no-repeat center center / 100% 100%',}"
			>
				<view class="justify-start align-center">
					<x-img width="46rpx" height="41rpx" :src="vipIcon"></x-img>
					<text class="buy-tips">购买会员赠送积分</text>
				
				</view>
				<view class="buy-btn center">
					立即购买
				</view>
			</view>
			<cell></cell>
		</view>
	</view>
</template>

<script>
	import cell from './component/cell.vue'
	export default {
		components:{
			cell
		},
		data() {
			return {
				mineBg:this.$baseImg+'/static/images/mine/mine-bg.png',
				defaultAva:this.$baseImg+'/static/images/mine/default-ava.png',
				vipBg:this.$baseImg+'/static/images/mine/vip-bg.png',
				vipIcon:this.$baseImg+'/static/images/mine/vip-icon.png',
			};
		}
	}
</script>

<style lang="scss" scoped>
	.cell-box{
		position: relative;
		z-index: 4;
		transform: translate(0,-50rpx);
		width: 100vw;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.ad{
			margin-top: 44rpx;
			width: 670rpx;
			height: 123rpx;
			padding: 0 38rpx 0 48rpx;
		}
		
		.buy-tips{
			margin-left: 21rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #F8E6B8;
		}
		.buy-btn{
			width: 155rpx;
			height: 65rpx;
			background: linear-gradient( 126deg, #FAE4AF 0%, #EBC984 100%);
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
		}
		
	}
	.top-bg{
		width: 100vw;
		height: 380rpx;
		.update{	
			width: 161rpx;
			height: 66rpx;
			background: #CC1D1D;
			border-radius: 40rpx 0rpx 0rpx 40rpx;
			margin-top: 30rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		.avatar{
			margin: 30rpx 0 0 54rpx;
			.ava-box{
				position: relative;
			}
			.ava-tag{
				position: absolute;
				bottom: -10rpx;
				width: 119rpx;
				height: 42rpx;
				background: linear-gradient( 137deg, #FFCD6C 0%, #B77800 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				
				font-weight: 500;
				font-size: 24rpx;
				color: #BD0000;
				text-shadow: 0px 4px 10px rgba(0,0,0,0.1);
			}
			.name-box{
								margin-left: 23rpx;
			}
			.name{
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.name-id{
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-top: 22rpx;
			}
		}
		.vip-info{
			position: relative;
			width: 670rpx;
			height: 145rpx;
			margin: 48rpx auto 0;
			box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			.vip-info-box{
				width: 670rpx;
				height: 145rpx;
				padding: 0 48rpx;
				position: relative;
				z-index: 3;
			}
			.before{
				position: absolute;
				top: 0;
				left: 0;
				width: 670rpx;
				height: 145rpx;
				z-index: 2;
				background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0.8) 100%);
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}
			.after{
				position: absolute;
				top: 0;
				left: 0;
				width: 670rpx;
				height: 145rpx;
				z-index: 1;
				background:rgba(255,255,255,0.6);
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}
			.score{
				position: relative;
				text-align: center;
				font-weight: 500;
				font-size: 40rpx;
				color: #CD8531;
				.score-tips{
					width: 71rpx;
					height: 31rpx;
					background: #CC1D1D;
					border-radius: 10rpx 10rpx 10rpx 0rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFE0A4;
					position: absolute;
					top:-20rpx;
					right: -40rpx;
				}
			}
			.score-title{
				margin-top: 15rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #2F2F2F;
			}
		}
	}
	
</style>
